-<template>
	<view class="profit-wrap page-bg">
		<view v-if="items.length <= 0" class="none-wrap">
			<none  :img='icon_none' text='暂时没有相关优惠券!'></none>
		</view>
		
		<view v-else class="coupon-list">
			<view class="coupon-item" v-for="item in items" :key='item.id'>
				<image  class="mine-item__avatar" src="../../static/item_29.png" mode=""></image>
				<!-- <image  class="mine-item__avatar" src="../../static/item_30.png" mode=""></image>
				<image  class="mine-item__avatar" src="../../static/item_31.png" mode=""></image> -->
				<view class="mine-item__info">
					<view class="mine-item__mount yuan">{{item.faceValue | formatMoney}}</view>
					<view class="mine-item__limit">满{{item.demand}}元可用</view>
					<view class="mine-item__time">{{item.startTime | formatTime}}~{{item.endTime | formatTime}}</view>
				</view>
				<view class="mine-item__profit btn" @click="linqu(item.id)">立即领取</view>
				<!-- <image v-else-if="currentNavId===1" class="btn-img" src="../../static/item_32.png" mode=""></image>
				<image v-else-if="currentNavId===2" class="btn-img" src="../../static/item_33.png" mode=""></image> -->
			</view>
		</view>
	</view>
</template>

<script>
	import icon_none from '../../static/common/icon_none_03.png'
	import none from '../../components/none.vue'
	import common from '../../utils/common.js'
	import { api } from '../../utils/api.js'
	export default {
		data() {
			return{
				icon_none,
				items: [],
			}
		},
		onLoad() {
			this.getItems()
		},
		methods:{
			getItems() {
				api.couponListA({  },(res) => {
					 this.items = res || []
				}) 
			},
			
			link(url) {
				this.$link(url)
			},
			
			linqu(id) {
				api.grabCoupons({ couponId: id },(res) => {
					 this.$showToast('优惠券领取成功~')
				}) 
			}
		},
		components:{
			none
		}
	}
</script>

<style scoped lang="less">
	@import url('../../app.less');
	.profit-wrap{
		.content-20;
		display: flex;
		flex-direction: column;
	}
	
	.coupon-list{
		margin-top: 20rpx;
	}
	.scroll-menu{
		background-color: @f;
		.br;
		.menu-item{
			width: 33.33%;
		}
	}
	
	.none-wrap{
		position: relative;
		flex-grow: 2;
		.flex-base;
		justify-content: center;
		.none{
			position: unset;
		}
	}
	.coupon-list{}
	.coupon-item{
		.flex-base;
		padding: 20rpx 30rpx;
		box-sizing: border-box;
		position: relative;
		color: @f;
		margin-bottom: 20rpx;
	}
	.mine-item__avatar{
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
	}
	.mine-item__info{
		position: relative;
	}
	.mine-item__mount{
		.fw;
		font-size: 60rpx;
	}
	.mine-item__limit{
		.f24;
	}
	.mine-item__time{
		font-size: 12rpx;
	}
	.mine-item__profit{
		height: 60rpx;
		line-height: 60rpx;
		.f28;
		color: @f;
		position: relative;
		background-color: transparent;
		border: 1px solid @f;
	}
	.btn-img{
		display: block;
		width: 102rpx;
		height: 102rpx;
		border-radius: 100%;
	}
	.btn{
		padding: 0 20rpx;
	}
	
</style>
